import { LiveType } from '@/model/home/types';
import { Live } from '@/model/live/Live';
import { useInjectable } from '@/unit/hooks/use-di';
import { useRouter } from '@tarojs/taro';
import React, {
  useCallback,
  useEffect,
  useState,
} from 'react';
import { AtTabBar } from 'taro-ui';
import { Tabs as Tab } from './Tabs.module';

const Tabs = () => {
  const tabs = useInjectable(Tab);
  const live = useInjectable(Live);
  const router = useRouter();
  const [act, setAct] = useState(0);

  useEffect(() => {
    if (router.path.includes('home')) {
      tabs.setActive(0);
    } else if (router.path.includes('mine')) {
      tabs.setActive(2);
    }
  }, [live, router.path, tabs]);

  useEffect(() => {
    // console.log('act', tabs.activekey);
    setAct(tabs.activekey);
  }, [tabs.activekey]);

  const handleBar = useCallback(
    (value: number) => {
      tabs.setState(value);
      if (value === 1) {
        live.live = new LiveType();
      }
    },
    [live, tabs]
  );

  return (
    <AtTabBar
      fixed
      tabList={[
        { title: '列表', iconType: 'bullet-list' },
        { title: `新增`, iconType: 'add-circle' },
        // { title: '我的', iconType: 'user' },
      ]}
      onClick={handleBar}
      current={act}
    />
  );
};

export default Tabs;
